<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../../css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" type="text/css" href="../../css/common.css" />
		<style type="text/css">
			/*红包样式*/
			
			.packet_data {
				padding: 0 14px;
			}
			
			.packet_list {
				width: 100%;
				background: url(../../images/packet.png)no-repeat;
				background-size: 100% 100%;
				color: #fff;
				min-height: 80px;
				height: calc(100vw/4);
				max-height: 100px;
				margin-top: 20px;
				display: -webkit-box;
				display: -moz-box;
				display: -ms-flexbox;
				display: -webkit-flex;
				display: flex;
				justify-content: space-between;
				align-items: center;
			}
			
			.packet_list_cls {
				-webkit-flex: 1;
				flex: 1;
				-webkit-box-flex: 1;
				-moz-box-flex: 1;
				-ms-flex: 1;
			}
			
			.packet_list_cls>div {
				width: 10px;
				width: 20px;
				margin: 0 auto;
				line-height: 16px;
			}
			
			.packet_list_data {
				-webkit-flex: 5;
				flex: 5;
				-webkit-box-flex: 5;
				-moz-box-flex: 5;
				-ms-flex: 5;
				padding-left: 4%;
				display: -webkit-box;
				display: -moz-box;
				display: -ms-flexbox;
				display: -webkit-flex;
				display: flex;
				align-items: center;
			}
			
			.packet_list_money {
				font-size: 18px;
			}
			
			.packet_list_money>span {
				font-size: 30px;
			}
			
			.packet_list_text {
				padding: 0 10px;
			}
			
			.packet_list_text>div {
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 1;
				overflow: hidden;
				word-break: break-all;
			}
			
			.mui-pull-caption {
				font-weight: normal;
				font-size: 12px;
			}
			/*没有红包*/
			
			.nocoupon {
				position: absolute;
				left: 50%;
				top: 50%;
				-webkit-transform: translate(-50%, -50%);
				transform: translate(-50%, -50%);
				font-size: 14px;
				color: #999;
				text-align: center;
				z-index: 1000;
				display: none;
			}
			
			.exchange {
				width: 60px;
				height: 20px;
				margin: 0 auto;
				border-radius: 4px;
				margin-top: 2px;
			}
			
			.exchange>button {
				padding: 0;
				font-size: 12px;
				width: 100%;
				height: 100%;
				background: #d62735;
				border-color: #fff;
			}
			/*领取成功*/
			/*遮罩层*/
			
			.show_mask {
				background-color: rgba(0, 0, 0, .4);
				display: none;
			}
			
			.success {
				position: absolute;
				left: 50%;
				top: 50%;
				-webkit-transform: translate(-50%, -50%);
				transform: translate(-50%, -50%);
				width: 80%;
				margin: 0 auto;
				text-align: center;
				border-radius: 14px;
				max-width: 350px;
				z-index: -1;
			}
			
			.md_show {
				z-index: 1000;
			}
			
			.success .md_content {
				padding: 30px 0 28px;
				background: #fff;
			}
			
			.success_img {
				width: 70px;
				margin: 0 auto;
			}
			
			.success_img>img {
				width: 100%;
				vertical-align: middle;
			}
			
			.close {
				position: absolute;
				top: 10px;
				right: 10px;
				width: 22px;
			}
			
			.close>img {
				width: 100%;
				vertical-align: middle;
			}
			
			.success_text {
				margin: 10px 0 12px;
			}
			
			.gocoipon>button {
				background: #bd212e;
				width: 120px;
			}
			
			@media screen and (max-width: 320px) {
				.success .md_content {
					padding: 24px 0 20px;
				}
				.success_img {
					width: 60px;
				}
			}
			
			.mui-backdrop {
				display: none;
			}
			
			.md_show+.mui-backdrop {
				display: block;
			}
		</style>
	</head>

	<body>
		<div id="packet" v-cloak>
			<header class="mui-bar mui-bar-nav">
				<a class="mui-action-back mui-icon mui-icon-arrowleft mui-pull-left"></a>
				<h1 class="mui-title">兑现红包</h1>
			</header>
			<div id="pullrefresh" class="mui-content mui-scroll-wrapper">
				<div class="mui-scroll">
					<div class="packet_data">
						<div class="packet_list" v-for="list in list">
							<div class="packet_list_cls">
								<div>通用券</div>
							</div>
							<div class="packet_list_data">
								<div class="packet_list_money">￥<span>{{list.offPrice}}</span></div>
								<div class="packet_list_text">
									<div>{{list.couponName}}【{{list.couponType=='common'?'全平台':list.siteName}}】</div>
									<div>有效期：{{list.endDateStr}}</div>
									<div class="exchange">
										<button type="button" class="mui-btn mui-btn-danger" @tap="receive(list)">兑换</button>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>

			<!--领取成功-->
			<!--md_show-->
			<div class="success" :class="{md_show:showMask}">
				<div class="md_content">
					<div class="success_img"><img src="../../images/checked.png" /></div>
					<div class="success_text">领取成功</div>
					<div class="gocoipon"><button type="button" class="mui-btn mui-btn-danger" @tap="immediately">立即去使用</button></div>
					<div class="close" @tap="showMask = false"><img src="../../images/close.png" /></div>
				</div>
			</div>
			<div class="mui-backdrop">
			</div>

			<div class="nocoupon">
				你暂时还没有可用的优惠券
			</div>
		</div>
		<script src="../../js/mui.min.js"></script>
		<script src="../../js/libs/zepto.js"></script>
		<script src="../../js/libs/vue.js"></script>
		<script src="../../js/common.js"></script>
		<script type="text/javascript">
			mui.init({

				pullRefresh: {
					container: '#pullrefresh',
					up: {
						auto: true,
						contentrefresh: '正在加载...',
						callback: pullupRefresh
					}
				}
			})

			var coupon = new Vue({
				el: '#packet',
				data: {
					imgCommonUrl: common.imageUrl,
					pageNum: 1,
					list: [],
					showMask: false
				},
				methods: {
					receive: function(data) {
						common.ajax('/coupon/p/m/coupon/receive/' + data.couponId, {

						}, function(data) {
							if(data.code == 1) {
								coupon.showMask = true
								var list = plus.webview.getWebviewById('../my/packet.html')
								mui.fire(list, 'reloads');
							} else {
								if(data.resultMsg) {
									common.toast(data.resultMsg)
								}
							}
						})
					},
					immediately: function() {
						var list = plus.webview.getWebviewById("ylindex.html")
						mui.fire(list, 'gohome');
						var wvs, self, launch;
						wvs = plus.webview.all();
						self = plus.webview.currentWebview();
						launch = plus.webview.getLaunchWebview();
						for(var i = 0, len = wvs.length; i < len; i++) {
							if(wvs[i].getURL() == launch.getURL() || wvs[i].id == 'ylindex.html' || wvs[i].id == 'home.html' || wvs[i].id == 'classify.html' || wvs[i].id == 'special.html' || wvs[i].id == 'shopping.html' || wvs[i].id == 'my.html' || wvs[i].id == '../special/specialregion.html') {
								continue;
							}
							wvs[i].close();
						}
					}
				}
			})

			function pullupRefresh() {
				$('.mui-pull-bottom-pocket').css('display', 'block !important')
				$('.nocoupon').hide()
				common.ajax('/coupon/wap/couponCenter/couponMore/platform', {
					curPageNO: coupon.pageNum++,
				}, function(data) {
					if(data.code == 1) {
						console.log(data.data)
						if(coupon.pageNum > data.data.pageCount) {
							mui('#pullrefresh').pullRefresh().endPullupToRefresh(true);
						} else {
							mui('#pullrefresh').pullRefresh().endPullupToRefresh();
						}
						coupon.list = coupon.list.concat(data.data.list)
						if(coupon.list.length <= 0) {
							$('.mui-pull-bottom-pocket').css('display', 'none !important')
							$('.nocoupon').show()
						} else {
							$('.mui-pull-bottom-pocket').css('display', 'block !important')
							$('.nocoupon').hide()
						}
					} else {
						mui('#pullrefresh').pullRefresh().endPullupToRefresh();
						if(data.resultMsg) {
							common.toast(data.resultMsg)
						}
					}
				}, true, 'get')
			}
		</script>
	</body>

</html>